<template>
  <!--    简历诊断结果详情页面       -->
  <!-- <page-wrap hide-tab back title="简历诊断" stayStill bgColor="transparent"> -->
  <!--              <ArticleItem v-if="item.type == 'article'" class="list-item" :key="index" :item="item.elementData"
          @update="handleUpdate($event, index)" @delete="handleDelete($event, index, 'article')"></ArticleItem>        -->

  <page-wrap ref="pageWrap" hideTab back title=" " navLeft :showTop="false" :dark="false" hideSafeArea>
    <view class="page" :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }">
      <swiper class="swiper-box" :duration="200" :vertical="true" @change="swiperChange" :current="currentPage">
        <swiper-item class="swiper-item">
          <JudgeResultFirstPage @setCurrentPage="setCurrentPage" />
        </swiper-item>
        <swiper-item class="swiper-item" v-for="(item, index) in diagnoseList" :key="index">
          <ContentPage :itemObj="item" @clickUnlock="unlockTypeSelectShow=true"
            @openCodeInputDialog="openCodeInputDialog" :isPayed="isPayed" :index="index"
            @setCurrentPage="setCurrentPage" />
        </swiper-item>

        <swiper-item class="swiper-item">
          <JudgeResultEndPage :fortuneCard="fortuneCard" :recordId="recordId" :fromZhituCard="fromZhituCard" />
        </swiper-item>
      </swiper>
    </view>
    <u-action-sheet :list="unlockTypeList" v-model="unlockTypeSelectShow" cancel-btn
      @click="selectunlockType"></u-action-sheet>
    <u-popup v-model="showCodePopup" mode="center" @close="handleCodePopupClose" closeable safe-area-inset-bottom
      mask-close-able width="600">
      <view class="activeCodeContainer">
        <view class="activeCodeTips">输入兑换码</view>
        <view class="inputContainer">
          <u-input v-model="activateCode" type="text" maxlength="8" :border="true" placeholder="请输入兑换码"
            border-radius="16" />
        </view>
        <view class="activateCondeConfirm" @click="requestUnlockByCode">确定</view>
      </view>
    </u-popup>
  </page-wrap>
</template>

<script>
import ContentPage from "./ContentPage.vue";
import JudgeResultFirstPage from "./JudgeResultFirstPage.vue";
import JudgeResultEndPage from "./JudgeResultEndPage.vue";
import { unlockResumeDiagnose, addOrderAndPay } from "@/api/index";
import { showDelayToastTip } from "@/utils/handle";
export default {
  props: {
    recordId: {
      type: String,
      default: "",
    },
    resultInfo: {
      type: Object,
      default: function () {
        return {};
      },
    },
    fromZhituCard: {
      type: Boolean,
      default: false,
    },
  },

  components: {
    ContentPage,
    JudgeResultFirstPage,
    JudgeResultEndPage,
  },

  data() {
    return {
      unlockTypeList: [
        {
          text: "微信支付解锁",
        },
        {
          text: "兑换码解锁",
        },
      ],
      showCodePopup: false,
      activateCode: "",
      unlockTypeSelectShow: false,
      // personId:'21907407',
      personId: uni.getStorageSync("person-id").slice(2) || undefined,

      openId: uni.getStorageSync("openid"),
      companyId: uni.getStorageSync("company-id"),
      isPayed: false,
      fortuneCard: {},
      screenHeight: 0,
      screenWidth: 0,
      diagnoseList: [],
      provider: "",
      currentPage: 0,
      unLockNum: 0, // 剩余简历诊断解锁次数
      totalUnLockNum: 0, // 总共简历诊断解锁次数
    };
  },

  watch: {
    resultInfo: {
      handler(val) {
        if (val.diagnoseList == null) {
          return;
        }
        this.diagnoseList = val.diagnoseList;
        this.fortuneCard = val.fortuneCard;
        this.isPayed = this.diagnoseList[0].isLock == 2;
        this.unLockNum = this.diagnoseList[0].unLockNum;
        this.totalUnLockNum = this.diagnoseList[0].totalUnLockNum;
      },
      deep: true, // 深度监听
      immediate: false, // 初始化的时候立刻执行一次
    },
  },
  created() {
    uni.getProvider({
      service: "payment",
      success: (res) => {
        this.provider = res.provider;
      },
    });
  },

  onReady() {
    let systemInfo = uni.getSystemInfoSync();
    this.screenHeight = systemInfo.windowHeight;
    this.screenWidth = systemInfo.windowWidth;
  },

  methods: {
    swiperChange(e) {
      this.currentPage = e.detail.current;
    },

    setCurrentPage(page) {
      this.currentPage = page;
    },
    selectunlockType(index) {
      console.log("index", index);

      if (index == 0) {
        this.handleUnlock();
      } else if (index == 1) {
        this.openCodeInputDialog();
      }
    },

    //原本点解锁是直接触发这个方法,但是要前置一步:选择直接解锁还是输入激活码解锁
    handleUnlock(res) {
      this.unlockTypeSelectShow = false;
      if (this.unLockNum && this.unLockNum > 0) {
        this.handleUnlockByLockNum();
      } else {
        this.handleUnlockByPay(res);
      }
    },

    // 通过之前的解锁次数解锁
    handleUnlockByLockNum() {
      console.log("通过之前的次数解锁");
      uni.showLoading();
      // 点击解锁
      let param = {
        personId: this.personId,
        diagnoseRecordId: this.recordId, //简历诊断记录id
      };
      //console.log(param);
      unlockResumeDiagnose(param)
        .then((res) => {
          // console.log(res);
          if (res && res.code == 200) {
            this.$emit("refreshDiagnosisData", {});
          } else {
            showDelayToastTip(res.status_desc, 50);
          }
        })
        .catch((err) => {
          console.log("console.error();", err);
        })
        .finally((res) => {
          uni.hideLoading();
        });
    },

    // 支付解锁
    handleUnlockByPay(res) {
      console.log("支付解锁");
      uni.showLoading();
      // 点击解锁
      let param = {
        personId: this.personId,
        openId: this.openId,
        activityType: "resumeCheck",
        helperId: this.recordId, //简历诊断记录id
        companyId: this.companyId ? this.companyId : this.personId, //企业编号，没有就填用户ID
      };

      addOrderAndPay(param).then((res) => {
        if (res.code == 200) {
          let payInfo = res.data.payInfo;
          // this.price = res.data.orderInfo.payAmount;
          // getApp().reportCOMPLETE_ORDER(this.price); // 上报下单
          this.requestPayment(payInfo);
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.status_desc,
            icon: "none",
            duration: 2000
          });
        }
      });
    },

    // 支付
    requestPayment(data) {
      if (this.provider.indexOf("wxpay") < 0) {
        return;
      }
      data.payData = JSON.parse(data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: data.payData.timeStamp,
        nonceStr: data.payData.nonceStr,
        package: data.payData.package,
        signType: data.payData.signType,
        paySign: data.payData.paySign,
        success: (res) => {
          this.handlePaySuccess(res);
        },
        fail: (err) => {
          this.handlePayFial(err);
        },
      });
    },
    openCodeInputDialog() {
      this.unlockTypeSelectShow = false;
      this.showCodePopup = true;
    },
    handleCodePopupClose() {
      this.showCodePopup = false;
      this.activateCode = "";
    },
    //发送请求用激活码解锁
    requestUnlockByCode() {
      uni.showLoading();
      // 点击解锁
      let param = {
        personId: this.personId,
        diagnoseRecordId: this.recordId, //简历诊断记录id
        unlockType: 1,
        couponNo: this.activateCode,
      };
      //console.log(param);
      unlockResumeDiagnose(param)
        .then((res) => {
          if (res && res.code == 200) {
            this.handlePaySuccess();
            this.showCodePopup = false;
          } else {
            showDelayToastTip(res.status_desc, 50);
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    handlePaySuccess(res) {
      uni.hideLoading();
      this.loading = false;
      uni.showToast({
        title: "购买成功",
        icon: "none",
        duration: 2000
      });

      this.$emit("refreshDiagnosisData", {});
    },
    handlePayFial(res) {
      uni.hideLoading();
      this.loading = false;
      uni.showToast({
        title: "购买失败",
        icon: "none",
        duration: 2000
      });
    },
  },
};
</script>


<style  lang="scss" scoped>
.swiper-box {
  width: 100%;
  height: 100%;
}
.swiper-item {
  width: 100%;
  height: 100%;
}
::v-deep.u-form-item--left__content__label {
  justify-content: center;
  margin-bottom: 0px;
}
.activeCodeContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  .activeCodeTips {
    margin-bottom: 20rpx;
  }
  .inputContainer {
    width: 80%;
    flex: 1;
  }
  .activateCondeConfirm {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 20rpx;
    width: 80%;
    height: 70rpx;
    background-color: #f75a3e;
    color: white;
    border-radius: 16rpx;
  }
}
</style>